<template>
	<div class="twohouse">
		<myheader :title="title"></myheader>
		<router-link to="/user/search">
			<div class="search">
				<div class="img"><img src="../../../static/lxb/search.png" /></div>
				<div class="txt">请输入商圈或小区名称</div>
			</div>
		</router-link>
		<div class="install">
			<div class="in-left">保存搜索条件，获取最新房源</div>
			<div class="in-center">安装app</div>
			<div class="in-right"><img src="../../../static/lxb/nav.png" /></div>
		</div>
		<!--数据查询-->
		<div class="data-box">
			<div class="databox" v-for="item in data">
				<router-link :to="{path:'/lideta/mydetails',query:{id:item.house_id}}">
					<div class="de-list">
						<div class="de-img">
							<img v-bind:src="'http://106.13.72.24:81/house/public/static/uploads/'+item.img1" />
						</div>
						<div class="de-pro">
							<div class="pro-one">{{item.house_name}}太阳台，住家装修，一线江景，诚信出售</div>
							<div class="pro-two">{{item.house_type}}/{{item.house_size}}m²/{{item.house_direction}}/{{item.house_des}}</div>
							<div class="pro-three"> {{item.house_price}}元/月</div>
						</div>
						<div class="other">满五年 随时可看</div>
					</div>
					<div class="news" style="box-shadow: 0 0 10px darkgray; border:1px solid gainsboro">
						<img src="../../../static/lxb/im@2x.png" />
					</div>
				</router-link>
			</div>
		</div>
		<div class="clik" @click="getData">{{state}}</div>
	</div>

</template>

<script>
	import myheader from '@/components/public/myheader'
	import choice from '@/components/public/choice'
	export default {
		name: "twohouse",
		data() {
			return {
				title: '',
				type: '',
				data: "",
				state: '点击加载更多...',
				page: 2,
				last_page: 0
			}
		},
		mounted: function() {
			//判读是否登陆了
			if (localStorage.getItem("nameid") == null || localStorage.getItem("nameid") == undefined || localStorage.getItem("nameid") == "") {
				this.$router.push({
					name: 'login'
				});
			} else {
				var _this = this;
				//接受search页面用户输入的值
				var userkey = _this.$route.query.userval;
				var datax = {
					userval: userkey
				}
				_this.axios.post(_this.ajaxUrl + '/api/Lideta/sellike', _this.qs.stringify(datax)).then(function(res) {
					_this.data = res.data.data;
					//					console.log(res.data);
				}).catch(function(err) {
					console.log(err)
				});
			}
		},
		components: {
			myheader,
			choice
		},
		methods: {
			back() {
				this.$router.go(-1);
			},
			getData() {
				var _this = this;
				_this.axios.get(_this.ajaxUrl + '/api/mylist/finds?page=' + _this.page).
				then(function(res) {
					for (var i = 0; i < res.data.data.length; i++) {
						_this.data.push(res.data.data[i]);
					}
					if (_this.page % 3 == 0) {
						_this.state = "没有更多了"
					}
					_this.page++;
					//					console.log(res)
				}).catch(function(err) {
					console.log(err)
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.search {
		width: 7rem;
		height: 0.6rem;
		margin: auto;
		background: #e8e8e9;
		margin-top: 0.3rem;
	}
	
	.img {
		width: 0.32rem;
		height: 0.33rem;
		float: left;
		margin-top: 0.1rem;
		margin-left: 0.2rem;
	}
	
	.img>img {
		width: 100%;
		height: 100%;
	}
	
	.txt {
		width: 5rem;
		height: 0.3rem;
		float: left;
		font-size: 0.12rem;
		color: #808897;
		margin-top: 0.1rem;
	}
	
	.nav-list {
		width: 7rem;
		height: 1rem;
		margin: auto;
		display: flex;
		justify-content: space-around;
		margin-top: 0.2rem;
	}
	
	.nav-list>div {
		width: 1.25rem;
		height: 0.6rem;
		text-align: center;
		line-height: 0.6rem;
		font-size: 0.26rem;
	}
	
	.install {
		width: 7rem;
		height: 0.9rem;
		margin: auto;
		border-bottom: 1px solid #e8e8e9;
	}
	
	.in-left {
		width: 4rem;
		height: 0.4rem;
		line-height: 0.4rem;
		font-size: 0.2rem;
		float: left;
		margin-top: 0.2rem;
	}
	
	.news {
		width: 0.8rem;
		height: 0.7rem;
		border-radius: 50%;
		text-align: center;
		line-height: 1rem;
		position: fixed;
		top: 10rem;
		left: 6rem;
		background: white;
		z-index: 999;
	}
	
	.news>img {
		width: 0.5rem;
		height: 0.5rem;
	}
	
	.in-center {
		width: 1.2rem;
		height: 0.5rem;
		float: left;
		border: 2px solid #cfdefc;
		border-radius: 0.1rem;
		text-align: center;
		line-height: 0.5rem;
		font-size: 0.26rem;
		color: #2a6ef6;
		margin-top: 0.1rem;
		margin-left: 0.9rem;
	}
	
	.in-right {
		width: 0.2rem;
		height: 0.3rem;
		float: right;
		margin-top: 0.2rem;
	}
	
	.in-right>img {
		width: 100%;
		height: 100%;
	}
	
	.de-list {
		width: 7.05rem;
		height: 2.45rem;
		float: right;
	}
	
	.de-img {
		width: 1.95rem;
		height: 1.5rem;
		float: left;
		margin-top: 0.30rem;
	}
	
	.de-img>img {
		width: 100%;
		height: 100%;
	}
	
	.de-pro {
		width: 4.1rem;
		height: 1.5rem;
		float: left;
		margin-top: 0.3rem;
		margin-left: 0.25rem;
	}
	
	.pro-one {
		width: 4.1rem;
		height: 0.7rem;
		font-size: 0.26rem;
	}
	
	.pro-two {
		width: 4.1rem;
		height: 0.3rem;
		font-size: 0.12rem;
		color: #b8b8b8;
		line-height: 0.32rem;
		margin-top: 0.1rem;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp:2;
	}
	
	.pro-three {
		width: 4.1rem;
		height: 0.3rem;
		font-size: 0.12rem;
		color: #b8b8b8;
		margin-top: 0.1rem;
	}
	
	.pro-three>span {
		color: red;
		font-size: 0.26rem;
	}
	
	.other {
		width: 7rem;
		height: 0.3rem;
		text-align: center;
		line-height: 0.3rem;
		float: left;
		margin-top: 0.2rem;
		font-size: 0.2rem;
		color: #7e95aa;
	}
	
	.clik {
		width: 3rem;
		height: 0.6rem;
		line-height: 0.6rem;
		margin: auto;
		border-radius: 0.1rem;
		/*background: gainsboro;
		border: 1px dashed darkgray;*/
		color: gray;
		font-size: 0.16rem;
		display: block;
		margin-top: 0.1rem;
		margin-bottom: 0.1rem;
	}
</style>